<!DOCTYPE html>
<html lang="zh-Hans">
<head>
    <meta charset="UTF-8">
    <title>用户个人中心</title>
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="yes" name="apple-touch-fullscreen">
    <meta content="telephone=no,email=no" name="format-detection">
    <!--以显示网页的屏幕宽度定义了视窗宽度。网页的比例和最大比例被设置为100%-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no"/>
    <link rel="stylesheet" href="asset/plugins/weui/css/weui.min.css">
    <link rel="stylesheet" href="asset/plugins/jquery-weui/css/jquery-weui.min.css">
    <link rel="stylesheet" href="asset/plugins/iconfont/iconfont.css">
    <link rel="stylesheet" href="asset/plugins/cropper/cropper.min.css">

    <link rel="stylesheet" href="asset/css/p-personal-center.css">
    <link rel="stylesheet" href="asset/css/m-avatar.css">
</head>
<body>
<div class="m-wrap" id="crop-avatar">
    <div class="weui-cells weui-cells--personal">
        <a href="javascript:;" data-target="#avatar-modal" class="weui-cell weui-cell_access open-popup avatar-view">
            <div class="weui-cell__bd">
                <p>头像</p>
            </div>
            <div class="weui-cell__hd" title="Change the avatar">
                <img class="p-personal-avatar g-img-bordered" src="asset/images/avatar/a9.jpg" alt="Avatar">
            </div>
            <div class="weui-cell__ft"></div>
        </a>
        <a href="javascript:;" data-target="#nickname" class="weui-cell weui-cell_access open-popup">
            <div class="weui-cell__bd">
                <i class="iconfont icon-gerenzhongxin"></i><span>昵称</span>
            </div>

            <div class="weui-cell__ft">兜兜里有糖</div>
        </a>
        <a href="javascript:;" data-target="#phone" class="weui-cell weui-cell_access open-popup">
            <div class="weui-cell__bd">
                <i class="iconfont icon-shouji"></i><span>手机</span>
            </div>
            <div class="weui-cell__ft"><p class="g-p-help">输入手机号码，实时掌握最新优惠</p></div>
        </a>
    </div>
    <div class="weui-cells weui-cells--personal">
        <a href="my-reward.html" class="weui-cell weui-cell_access">
            <div class="weui-cell__bd">
                <i class="iconfont icon-dashang"></i><span>我的打赏</span>
            </div>
            <div class="weui-cell__ft"></div>
        </a>
        <a href="my-draw.html" class="weui-cell weui-cell_access">
            <div class="weui-cell__bd">
                <i class="iconfont icon-choujiang"></i><span>我的抽奖</span>
            </div>
            <div class="weui-cell__ft"></div>
        </a>
        <a href="collection.html" class="weui-cell weui-cell_access">
            <div class="weui-cell__bd">
                <i class="iconfont icon-wujiaoxing-copy1"></i><span>我的收藏</span>
            </div>
            <div class="weui-cell__ft"></div>
        </a>
        <a href="my-message.html" class="weui-cell weui-cell_access">
            <div class="weui-cell__bd">
                <i class="iconfont icon-xinfeng"></i><span>我的私信</span>
                <span class="weui-badge g-ml--5">8</span>
            </div>
            <div class="weui-cell__ft"></div>
        </a>
    </div>
    <div class="weui-cells weui-cells--personal">
        <a href="javascript:;" data-target="#feedback" class="weui-cell weui-cell_access open-popup">
            <div class="weui-cell__bd">
                <i class="iconfont icon-pinglun"></i><span>意见反馈</span>
            </div>
            <div class="weui-cell__ft"></div>
        </a>
        <a href="javascript:;" data-target="#agreement" class="weui-cell weui-cell_access open-popup">
            <div class="weui-cell__bd">
                <i class="iconfont icon-agreement"></i><span>服务协议</span>
            </div>
            <div class="weui-cell__ft"></div>
        </a>
        <a href="javascript:;" data-target="#about" class="weui-cell weui-cell_access open-popup">
            <div class="weui-cell__bd">
                <i class="iconfont icon-women"></i><span>关于我们</span>
            </div>
            <div class="weui-cell__ft"></div>
        </a>
    </div>
    <div class="m-submit-wrap">
        <a href="javascript:;" onclick="history.go(-1)" class="weui-btn weui-btn_orange">返回上一页</a>
    </div>



    <!--弹出层 昵称-->
    <div id="nickname" class="weui-popup__container weui-popup--default">
        <div class="weui-popup__overlay"></div>
        <div class="weui-popup__modal">
            <div class="m-modal_header">
                <h4 class="m-modal_header_title">昵称</h4>
                <a href="javascript:;" class="m-modal_header_closed close-popup">
                    <i class="iconfont icon-quxiao"></i>
                </a>
            </div>
            <div class="m-modal_body">
                <div class="g-overflow-wrap-y">
                    <div class="weui-cells weui-cells_form">
                        <div class="weui-cell">
                            <div class="weui-cell__hd"><label class="weui-label">昵称</label></div>
                            <div class="weui-cell__bd">
                                <input class="weui-input" type="text" placeholder="请输入昵称"/>
                            </div>
                        </div>
                    </div>

                    <div class="weui-btn-area"><a href="javascript:;" class="weui-btn weui-btn_orange">确定</a></div>
                </div>
            </div>
        </div>
    </div>
    <!--弹出层 手机号-->
    <div id="phone" class="weui-popup__container weui-popup--default">
        <div class="weui-popup__overlay"></div>
        <div class="weui-popup__modal">
            <div class="m-modal_header">
                <h4 class="m-modal_header_title">手机号</h4>
                <a href="javascript:;" class="m-modal_header_closed close-popup">
                    <i class="iconfont icon-quxiao"></i>
                </a>
            </div>
            <div class="m-modal_body">
                <div class="g-overflow-wrap-y">
                    <div class="weui-cells weui-cells_form">
                        <div class="weui-cell weui-cell_vcode">
                            <div class="weui-cell__hd">
                                <label class="weui-label">新手机</label>
                            </div>
                            <div class="weui-cell__bd">
                                <input class="weui-input" type="tel" placeholder="请输入新号码">
                            </div>
                            <div class="weui-cell__ft">
                                <a href="javascript:;" class="weui-vcode-btn js-btn-get-code">获取验证码</a>
                            </div>
                        </div>
                        <div class="weui-cell">
                            <div class="weui-cell__hd"><label class="weui-label">验证码</label></div>
                            <div class="weui-cell__bd">
                                <input class="weui-input" type="number" placeholder="请输入验证码"/>
                            </div>
                        </div>
                    </div>
                    <div class="weui-cells__tips js-tel-error g-mb--10" style="display:none;"><span class="g-c--red">手机号格式有误。</span></div>
                    <div class="weui-cells__tips g-mt--10" style="display:none;"><span class="g-c--red">您输入的验证码有误。</span></div>
                    <div class="weui-btn-area"><a href="javascript:;" class="weui-btn weui-btn_orange">确定</a></div>
                </div>
            </div>
        </div>
    </div>
    <!--弹出层 意见反馈-->
    <div id="feedback" class="weui-popup__container weui-popup--default">
        <div class="weui-popup__overlay"></div>
        <div class="weui-popup__modal">
            <div class="m-modal_header">
                <h4 class="m-modal_header_title">意见反馈</h4>
                <a href="javascript:;" class="m-modal_header_closed close-popup">
                    <i class="iconfont icon-quxiao"></i>
                </a>
            </div>
            <div class="m-modal_body">
                <div class="g-overflow-wrap-y">
                    <div class="weui-cells weui-cells_form">
                        <div class="weui-cell">
                            <div class="weui-cell__bd">
                                <textarea class="weui-textarea js-textarea" name="" rows="3" maxlength="140" placeholder="请填写您的意见~"></textarea>
                                <div class="weui-textarea-counter js-textarea-counter"><span>0</span>/140</div>
                            </div>
                        </div>
                    </div>

                    <div class="weui-btn-area"><a href="javascript:;" class="weui-btn weui-btn_orange">确定</a></div>
                </div>
            </div>
        </div>
    </div>
    <!--弹出层 服务协议-->
    <div id="agreement" class="weui-popup__container weui-popup--default">
        <div class="weui-popup__overlay"></div>
        <div class="weui-popup__modal">
            <div class="m-modal_header">
                <h4 class="m-modal_header_title">帮助页面</h4>
                <a href="javascript:;" class="m-modal_header_closed close-popup">
                    <i class="iconfont icon-quxiao"></i>
                </a>
            </div>
            <div class="m-modal_body">
                <div class="g-overflow-wrap-y">
                    <article class="weui-article">
                        <section>
                            <h2 class="title">章标题</h2>
                            <section>
                                <h3>1.1 节标题</h3>
                                <p>
                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                                    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                                    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                                    consequat.
                                </p>
                                <p>
                                    <img src="./images/pic_article.png" alt="">
                                    <img src="./images/pic_article.png" alt="">
                                </p>
                            </section>
                            <section>
                                <h3>1.2 节标题</h3>
                                <p>
                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                                    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                                    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                                    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                                </p>
                            </section>
                        </section>
                    </article>
                </div>
            </div>
        </div>
    </div>
    <!--弹出层 关于我们-->
    <div id="about" class="weui-popup__container  weui-popup--default">
        <div class="weui-popup__overlay"></div>
        <div class="weui-popup__modal">
            <div class="m-modal_header">
                <h4 class="m-modal_header_title">关于我们</h4>
                <a href="javascript:;" class="m-modal_header_closed close-popup">
                    <i class="iconfont icon-quxiao"></i>
                </a>
            </div>
            <div class="m-modal_body">
                <div class="g-overflow-wrap-y">
                    <article class="weui-article">
                        <section>
                            <h2 class="title">章标题</h2>
                            <section>
                                <h3>1.1 节标题</h3>
                                <p>
                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                                    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                                    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                                    consequat.
                                </p>
                                <p>
                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                                    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                                    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                                    consequat.
                                </p>
                                <p>
                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                                    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                                    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                                    consequat.
                                </p>
                                <p>
                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                                    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                                    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                                    consequat.
                                </p>
                                <p>
                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                                    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                                    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                                    consequat.
                                </p>
                                <p>
                                    <img src="./images/pic_article.png" alt="">
                                    <img src="./images/pic_article.png" alt="">
                                </p>
                            </section>
                            <section>
                                <h3>1.2 节标题</h3>
                                <p>
                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                                    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                                    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                                    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                                </p>
                            </section>
                        </section>
                    </article>
                </div>
            </div>
        </div>
    </div>
    <!--弹出层 头像-->
    <div id="avatar-modal" class="weui-popup__container weui-popup--default">
        <div class="weui-popup__overlay"></div>
        <div class="weui-popup__modal">
            <form class="avatar-form" action="crop.php" enctype="multipart/form-data" method="post">
                <div class="m-modal_header">
                    <h4 class="m-modal_header_title">头像</h4>
                    <a href="javascript:;" class="m-modal_header_closed close-popup">
                        <i class="iconfont icon-quxiao"></i>
                    </a>
                </div>
                <div class="m-modal_body">
                    <!-- Upload image and data -->
                    <div class="avatar-upload weui-btn-area">
                        <input type="hidden" class="avatar-src" name="avatar_src">
                        <input type="hidden" class="avatar-data" name="avatar_data">
                        <div class="weui-btn weui-btn_link weui-btn_orange m-btn-file">
                            选择图片
                            <input type="file" accept="image/*,camera" class="avatar-input" id="avatarInput" name="avatar_file">
                        </div>
                    </div>

                    <div class="weui-loadmore" style="display:none;">
                        <i class="weui-loading"></i>
                        <span class="weui-loadmore__tips">正在加载</span>
                    </div>
                    <!-- Crop and preview -->
                    <div class="g-mt--20">
                        <div class="avatar-wrapper js-container" style="height:11rem;">
                            <img class="js-image" src="">
                        </div>
                    </div>
                    <div class="weui-flex">
                        <div class="weui-flex__item g-ta--c">
                            <div class="avatar-preview preview-md js-result">
                                <img id="face_image" src="" alt="">
                            </div>
                        </div>
                    </div>

                    <div class="weui-btn-area">
                        <!--<button type="button" id="upload_btn" class="weui-btn weui-btn_orange btn-block avatar-save">上传头像</button>-->
                        <button type="button" id="image_save" class="weui-btn weui-btn_orange btn-block avatar-save">保存</button>
                    </div>

                </div>
            </form>
        </div>
    </div>
</div>
<script type="text/javascript" src="asset/plugins/jquery/jquery-2.1.4.js"></script>
<script type="text/javascript" src="asset/plugins/jquery-weui/js/jquery-weui.min.js"></script>
<script type="text/javascript" src="asset/plugins/cropper/cropper.min.js"></script>
<script type="text/javascript" src="asset/js/m-grade-stars.js"></script>
<!--<script type="text/javascript" src="asset/js/m-avatar.js"></script>-->
<script src="asset/js/m-inputs.js"></script>
<script>
$(function(){
    /**
     * cropper图片上传
     */
    $(function() {
        console.log('cropper图片上传。。。');

        //触发input file
        $('#upload_btn').click(function() {
            console.log('模拟点击。。。');
            $('#avatarInput').trigger('click');
        });

        //图片上传
        var $image = $('.js-container > img');
        $image.cropper({
            viewMode: 1,
//      preview: '.img-preview', //不同尺寸预览区
            dragMode: 'move',
            aspectRatio: 1,
            autoCropArea: 0.65,
            restore: false,
            guides: false,
            center: false,
            highlight: false,
            cropBoxMovable: false,
            cropBoxResizable: false,
            toggleDragModeOnDblclick: false,
            crop: function(data) { //裁剪操作回调
            }
        });
        var fileName; //选择上传的文件名
        $('#avatarInput').change(function(){
            var file = this.files[0];
            fileName = file.name;
            var reader = new FileReader();
            //reader回调，重新初始裁剪区
            reader.onload = function(){
                // 通过 reader.result 来访问生成的 DataURL
                var url = reader.result;
                //选择图片后重新初始裁剪区
                $image.cropper('reset', true).cropper('replace', url);
            };
            reader.readAsDataURL(file);
        });

        /*
         * 上传图片
         */
        $('#image_save').click(function() {
            var type = $image.attr('src').split(';')[0].split(':')[1];

            var canVas = $image.cropper("getCroppedCanvas", {});
            //将裁剪的图片加载到face_image
            $('#face_image').attr('src', canVas.toDataURL());
            console.log(canVas.toDataURL());
            canVas.toBlob(function(blob) {
                var formData = new FormData();
                formData.append("file", blob, fileName);

                /*$.ajax({
                    type: "POST",
                    url: '/sys/file/uploadImage.do',
                    data: formData,
                    contentType: false, //必须
                    processData: false, //必须
                    dataType: "json",
                    success: function(retJson){
                        //清空上传文件的值
                        $('#avatarInput').val('');

                        //上传成功
                        console.log('retJson:', retJson);
                    },
                    error : function() {
                        //清空上传文件的值
                        $(_pageId + '#avatarInput').val('');
                    }
                });*/
            }, type);

        });

        //取消
        $("#image_cancel").click(function() {
            //清空上传文件的值
            $(_pageId + inputFileId).val('');
        });
    });
});
</script>
</body>
</html>